@color:#0ea2ec;
.ellipsis{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.chat-box {
    margin-bottom: 50px;
    .photos{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: .3rem 15px;
        border-bottom: #f3f3f3 1px solid;
        font-size: .22rem;
        .img{
            flex: 1;
            margin-right: .15rem;
            img{
                width: 1.3rem;
                height: 1.3rem;
                border-radius: 50%;
            }
        }
        .info{
            flex: 3;
            color: #2b2b2b;
            line-height: .4rem;
            i{
                color: #666;
            }
        }
    }
}

.contacts-list {
    display: flex;
    .avatar {
        width: 30%;
        img {
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
        }
    }
    p{
        line-height: 1rem; 
        width: 65%;
        .ellipsis()
    }
    // span{
    //     width: 40%;
    //     line-height: 1rem;
    //     text-align: right;
    //     .ellipsis()
    // }
    i {
        width: 8px;
        height: 8px;
        background: red;
        border-radius: 50%;
    }
}

.list-box{
    position: relative;
    padding: .34rem 15px;
    border-bottom: #e9e9e9 1px solid;
    .hd-msg{
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        font-size: .22rem;
        color: #767676;
        em{ color: @color; }
    }
    .list{
        font-size: .22rem;
        margin-top: .15rem;
        div{
            margin: .25rem 0 .18rem;
            text-align: justify;
            line-height: .35rem;
        }
        p{
            text-align: justify;
            line-height: .4rem;
        }
    }
}